<template>
  <div class="nav">

    <el-menu
      :default-active="$route.path"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
      router
    >

      <el-menu-item index="/home">首页</el-menu-item>
      <el-menu-item index="/square">广场</el-menu-item>
      <el-menu-item index="/dynamic">动态</el-menu-item>
      <el-menu-item index="/news">消息</el-menu-item>
      <el-menu-item index="/recommend">推荐</el-menu-item>
      <el-menu-item index="/notice">公告</el-menu-item>
      <el-menu-item index="/release">发布</el-menu-item>
      <el-menu-item index="/feedback">留言反馈</el-menu-item>

    </el-menu>
  </div>

</template>

<script>

</script>

<style lang="less" scoped>
.nav {
  background-color: #545c64;
  .el-menu-demo {
    width: 1200px;
    margin: 0 auto;
  }
  .nav-right {
    float: right;
    font-size: 16px;
    padding: 0 150px;
    margin:16px 0 0 0;
    font-weight: 700;
    .dl{
      color: #fff;
      font-size: 16px;

    }

    .user-icon {
      display: inline-block;
      position: relative;
      width: 35px;
      height: 35px;
      border-radius: 50%;
      color: #000;
      z-index:9;

      .el-image {
        position: relative;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        z-index: 12;
        transition: all 0.3s;
        &:hover {
          transform: scale(1.5) translateY(40%);

        }
      }
    }
  }
}


</style>